<template>
  <div class="charts_container">
    <slot name="tit"></slot>
    <div id="deviceCharts" style="width: 100%;height: 100%;">
      <div class="nodata" v-if="!data || !data.length">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this._initCharts()
  },
  methods: {
    _initCharts () {
      if(!this.data || !this.data.length) {
        return
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("deviceCharts"))
      
      const labelList =  []
      const valueList =  []
      this.data.forEach(item => {
        labelList.push(item.name)
        valueList.push(item.total)
      })

      const option = {
          error: false,
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  lineStyle: {
                      color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                              offset: 0,
                              color: 'rgba(255,255,255,0.1)' // 0% 处的颜色
                          }],
                          global: false // 缺省为 false
                      }
                  },
              },

          },
          dataZoom: [{
              type: "slider",
              /*类型*/
              xAxisIndex: 0,
              /*对应的轴*/
              bottom: "10%",
              /*位置，定位*/
              start: 0,
              /*开始*/
              end: 15,
              /*结束*/
              handleIcon: "M0,0 v9.7h5 v-9.7h-5 Z",
              handleStyle: {
                  /*手柄的样式*/
                  color: "transparent",
                  borderColor: "transparent",
              },
              backgroundColor: "#303030",
              borderColor: 'transparent',
              textStyle: {
                color: 'transparent'  
              },
              height: this.$options.filters.fontSize(0.06),
              /*背景 */
              dataBackground: {
                  /*数据背景*/
                  lineStyle: {
                      color: "transparent"
                  },
                  areaStyle: {
                      color: "transparent"
                  }
              },
              fillerStyle: {
                  borderRadius: 6
              },
              fillerColor: "#828282",
              /*被start和end遮住的背景*/

          }, {
              "type": "inside",
              "show": true,
              "height": this.$options.filters.fontSize(0.15),
              "start": 0,
              "end": 15
          }],
          grid: {
              top: '25%',
              left: '5%',
              right: '5%',
              bottom: '20%',
              containLabel: true
          },
          xAxis: [{
              type: 'category',
              boundaryGap: true,
              axisLine: { //坐标轴轴线相关设置。数学上的x轴
                  show: true,
                  lineStyle: {
                      color: 'transparent'
                  },
              },
              axisLabel: { //坐标轴刻度标签的相关设置
                  textStyle: {
                      color: '#fff',
                      fontSize: this.$options.filters.fontSize(0.12)
                  },
              },
              axisTick: {
                  show: false,
              },
              data: labelList,
          }],
          yAxis: [{
              name: '数量（路）',
              nameTextStyle: {
                  color: '#fff',
                  fontSize: this.$options.filters.fontSize(0.12)
              },
              color: '#000',
              type: 'value',
              splitLine: {
                  show: true,
                      lineStyle: {
                  color: ['#fff'],
                  width: 1,
                  type: 'solid',
                  opacity: 0.1,
                  }
              },
              axisLine: {
                  color: "#666",
                  lineStyle: {
                      color: 'transparent'
                  },
              },
              axisLabel: {
                  color: "#fff",
                  fontSize: this.$options.filters.fontSize(0.12)
              },
              axisTick: {
                  show: false,
              },
          }],
          series: [{
              name: '数量（路）',
              nameTextStyle: {
                  fontSize: this.$options.filters.fontSize(0.12)
              },
              type: 'line',
              smooth: false, //是否平滑曲线显示
              symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbolSize: this.$options.filters.fontSize(0.06),
              lineStyle: {
                  normal: {
                      color: "#B7B7B7", // 线条颜色
                  },
                  borderColor: '#B7B7B7'
              },
              label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                      color: '#fff',
                      fontSize: this.$options.filters.fontSize(0.12)
                  }
              },
              itemStyle: {
                  normal: {
                      color: "#B7B7B7",
                  }
              },
              tooltip: {
                  show: true
              },
              areaStyle: { //区域填充样式
                  normal: {
                      //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: 'rgba(183, 183, 183, 0.3)'
                          },
                          {
                              offset: 1,
                              color: 'rgba(183, 183, 183, 0)'
                          }
                      ], false),
                      shadowColor: 'rgba(183, 183, 183, 0.3)', //阴影颜色
                      shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                  }
              },
              data: valueList
          }]
      };





      // 绘制图表
      myChart.setOption(option)

    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: calc(100% - 16px);
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
</style>